<meta charset="UTF-8">
<style>
    ul {
        background-color: #ccc;
    }
    li {
        height: 30px;
        background-color: green;
        margin: 20px 0;
    }
    .tip-bottom {
        margin: 20px;
        padding: 5px;
        width: 300px;
        height: 60px;
        border: 2px solid #f99;
        position: relative;
        background-color: white;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
    }
    .tip-bottom:before, .tip-bottom:after {
        content: "";
        display: block;
        border-width: 15px;
        position: absolute;
        bottom: -30px;
        left: 100px;
        border-style: solid dashed dashed solid;
        border-color: #f99 transparent transparent transparent;
        font-size: 0;
        line-height: 0;
    }
    .tip-bottom:after {
        bottom: -27px;
        border-color: white transparent transparent transparent;
    }
    </style>
    <ul>
        <li>0001</li>
        <li>0002</li>
        <li>0003</li>
        <li>0004</li>
        <li>0005</li> 
    </ul>
    <div class="tip-bottom">
        我是提示框<br/>
        内容可以自定义
    </div>

<script>
    var liObjs = document.querySelectorAll('ul')
    ulObjs.forEach(function(item, i) { 
    item.onmousemove = function(evt) {
        var e = evt || window.event
        var divObj = document.querySelector('div')
        divObj.style.display = 'block'
        divObj.style.left = e.clientX + 'px'
        divObj.style.top = e.clientY + 'px'
        divObj.innerText = this.innerText
    }
    item.onmouseout = function() {
        var divObj = document.querySelector('div')
        divObj.style.display = 'none'
    }
})
</script>